import React from "react";
import { Card, Row, Col, Statistic, Table, Progress } from "antd";
import {
  UserOutlined,
  BookOutlined,
  TeamOutlined,
  RiseOutlined,
} from "@ant-design/icons";
import { Line, Pie } from "@ant-design/plots";
import styled from "styled-components";

const DashboardContainer = styled.div`
  padding: 24px;
  background: #f0f2f5;
`;

const StyledCard = styled(Card)`
  margin-bottom: 24px;
`;

const Dashboard: React.FC = () => {
  // 模拟数据
  const teacherPerformanceData = [
    {
      teacher: "张老师",
      satisfaction: 95,
      courses: 4,
      students: 120,
      rating: 4.8,
    },
    {
      teacher: "李老师",
      satisfaction: 88,
      courses: 3,
      students: 90,
      rating: 4.5,
    },
    {
      teacher: "王老师",
      satisfaction: 92,
      courses: 5,
      students: 150,
      rating: 4.7,
    },
  ];

  const courseData = [
    { year: "2023-Q1", value: 85 },
    { year: "2023-Q2", value: 88 },
    { year: "2023-Q3", value: 92 },
    { year: "2023-Q4", value: 95 },
    { year: "2024-Q1", value: 96 },
  ];

  const pieData = [
    { type: "优秀", value: 35 },
    { type: "良好", value: 45 },
    { type: "一般", value: 15 },
    { type: "需改进", value: 5 },
  ];

  const columns = [
    { title: "教师姓名", dataIndex: "teacher", key: "teacher" },
    {
      title: "满意度",
      dataIndex: "satisfaction",
      key: "satisfaction",
      render: (value: number) => (
        <Progress percent={value} size="small" status="active" />
      ),
    },
    { title: "课程数", dataIndex: "courses", key: "courses" },
    { title: "学生数", dataIndex: "students", key: "students" },
    { title: "评分", dataIndex: "rating", key: "rating" },
  ];

  return (
    <DashboardContainer>
      <Row gutter={24}>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="总教师数"
              value={15}
              prefix={<UserOutlined />}
              valueStyle={{ color: "#3f8600" }}
            />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="总课程数"
              value={45}
              prefix={<BookOutlined />}
              valueStyle={{ color: "#cf1322" }}
            />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="总学生数"
              value={360}
              prefix={<TeamOutlined />}
              valueStyle={{ color: "#1890ff" }}
            />
          </StyledCard>
        </Col>
        <Col span={6}>
          <StyledCard>
            <Statistic
              title="平均满意度"
              value={92}
              prefix={<RiseOutlined />}
              suffix="%"
              valueStyle={{ color: "#52c41a" }}
            />
          </StyledCard>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col span={16}>
          <StyledCard title="教学质量趋势">
            <Line
              data={courseData}
              xField="year"
              yField="value"
              point={{
                size: 5,
                shape: "diamond",
              }}
              label={{
                style: {
                  fill: "#aaa",
                },
                position: "top",
              }}
            />
          </StyledCard>
        </Col>
        <Col span={8}>
          <StyledCard title="教师评级分布">
            <Pie
              data={pieData}
              angleField="value"
              colorField="type"
              radius={0.8}
              label={{
                type: "spider",
                content: "{name}\n{percentage}",
              }}
              interactions={[
                {
                  type: "element-active",
                },
              ]}
            />
          </StyledCard>
        </Col>
      </Row>

      <StyledCard title="教师绩效表现">
        <Table
          columns={columns}
          dataSource={teacherPerformanceData}
          pagination={false}
        />
      </StyledCard>
    </DashboardContainer>
  );
};

export default Dashboard;
